<!-- 创建时间: 2019年10月29日 星期二 01:24 -->
<template>
    <div class="UpdatePhoneNumber_container">
        <div class="userInfo">
            <div class="phoneNumber">
                <span>手机号:{{ userInfo.cellPhoneNumber }}</span>
                <button
                    type="button"
                    class="mui-btn mui-btn-outlined"
                    @click="getSMS"
                    ref="getSMS"
                >{{ getVerBtnText }}</button>
            </div>
            <div
                contenteditable="true"
                class="phoneNumber"
                ref="code"
                @focus="placeholderFocus"
                @blur="placeholderBlur"
            >{{ placeholderText }}</div>
            <div class="controlBtn">
                <button
                    type="button"
                    class="mui-btn mui-btn-primary mui-btn-outlined mui-btn-block"
                    ref="VBtn"
                    @click="Verification"
                >验证</button>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            userInfo: this.$route.query.userInfo,
            // 获取短信控制定时器
            getSMS_Dt: "",
            placeholderText: "请输入短信验证码",
            getVerBtnText: "获取验证码"
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 会员获取短信验证码
        getSMS() {
            this.$refs.getSMS.setAttribute("disabled", "disabled");
            var second = 120;
            this.getSMS_Dt = setInterval(() => {
                second--;
                var text = "获取验证码(" + second + ")";
                this.getVerBtnText = text;
                if (second <= 0) {
                    clearInterval(this.getSMS_Dt);
                    this.getVerBtnText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                    this.$refs.VBtn.removeAttribute("disabled");
                }
            }, 1000);

            this.$http.post("getUserPhoneNumber").then(response => {
                if (response.bodyText != "") {
                    this.$http
                        .post("getSMS", {
                            phoneNumber: response.bodyText
                        })
                        .then(response => {
                            mui.alert(response.bodyText);
                            this.getVerBtnText = "获取验证码";
                            this.$refs.VBtn.removeAttribute("disabled");
                        });
                }
            });
        },
        // 验证框获得焦点事件
        placeholderFocus() {
            this.placeholderText = "";
        },
        // 验证框失去焦点事件
        placeholderBlur() {
            if (this.$refs.code.innerText.trim() == "") {
                this.placeholderText = "请输入短信验证码";
            }
        },
        // 验证按钮事件
        Verification() {
            var code = this.$refs.code.innerText;
            if (this.$refs.getSMS.getAttribute("disabled") == null) {
                mui.alert("请先获取验证码");
                return;
            }
            if (code.trim() == "请输入短信验证码" || code.trim() == "") {
                mui.alert("请输入正确的验证码");
                return;
            }
            this.$refs.VBtn.setAttribute("disabled", "disabled");
            var _this = this;
            this.$http.post("checkCode", { code: code }).then(response => {
                if (response.bodyText == "success") {
                    var btnArray = ["取消", "确定"];
                    var message = "请输入新手机号";
                    mui.prompt(
                        message,
                        "",
                        "立方库智能停车系统",
                        btnArray,
                        function(e) {
                            if (e.index == 1) {
                                _this.$http
                                    .post("updateUserPhoneNumber", {
                                        newPhone: e.value
                                    })
                                    .then(response => {
                                        if (response.bodyText == "success") {
                                            _this.$router.push({
                                                path:
                                                    _this.$route.query.redirect
                                            });
                                            _this.$store.commit(
                                                "setUpdateStatus",
                                                1
                                            );
                                        }
                                    });
                            } else {
                                _this.$router.push(_this.$route.query.redirect);
                            }
                        }
                    );
                    // 修改对话框输入类型
                    // document.querySelector('.mui-popup-input input').type='password';
                } else {
                    this.$refs.VBtn.removeAttribute("disabled");
                    console.log("身份验证失败");
                }
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        if (this.userInfo.name == undefined) {
            this.$router.go(-1);
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.UpdatePhoneNumber_container {
    margin-top: 45px;
    position: absolute;
    width: 100%;
    .userInfo {
        border: 1px solid lightgray;
        box-shadow: 0px 0px 10px 2px lightgrey;
        margin: 10px;
        .phoneNumber {
            margin: 10px;
            color: gray;
            padding: 10px;
            box-shadow: inset 0px 0px 11px 1px darkturquoise;
            font-size: 15px;
            font-family: monospace;
            display: flex;
            justify-content: space-between;
            span {
                line-height: 33px;
            }
        }
        .controlBtn {
            padding: 1rem 8rem;
        }
    }
}
.mui-btn-block {
    margin-bottom: 0px;
    padding: 6px 0;
}
</style>